import React, {useState} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import ChatNavigation from './Navigation';
import {useNavigation} from '@react-navigation/native';
import {Flex, Pressable, Text} from 'native-base';
const ChatSetLabel = () => {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  const [labelList] = useState([
    '燃煤发电',
    '燃料构成',
    '燃煤系统',
    '汽水系统',
    '抽汽凝汽式机组',
    '纯背压机组',
    '抽汽背压机组',
    '发变组系统',
    '厂用电系统',
    'UPS系统',
    '1XX标签',
    '2XX标签',
    '3XX标签',
  ]);
  const [selectLabel, setLabel] = useState(['燃煤发电', 'UPS系统']);
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#eee', paddingTop: insets.top, paddingBottom: insets.bottom}} edges={['left', 'right']}>
      <ChatNavigation
        title="会诊室标签"
        showMore={false}
        rightSlot={
          <Pressable onPress={() => navigation.goBack()}>
            <Text color="#007AFF">完成</Text>
          </Pressable>
        }
      />
      <Flex flex={1} flexDir="row" flexWrap="wrap">
        {labelList.map((item, index) => (
          <Pressable
            key={index}
            bg={selectLabel.includes(item) ? '#007AFF' : '#fff'}
            borderRadius={4}
            borderWidth={1}
            borderColor="#eee"
            p={2}
            m={2}
            onPress={() => {
              if (selectLabel.includes(item)) {
                setLabel(selectLabel.filter(label => label !== item));
              } else {
                setLabel([...selectLabel, item]);
              }
            }}>
            <Text color={selectLabel.includes(item) ? '#fff' : '#000'}>{item}</Text>
          </Pressable>
        ))}
      </Flex>
    </SafeAreaView>
  );
};

export default ChatSetLabel;
